<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GLB Model Viewer</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        #scene-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
<!-- 用于显示 3D 场景的容器 -->
<div id="scene-container"></div>

<!-- 引入 three.js 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<!-- 引入 GLTFLoader 加载器 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/GLTFLoader.min.js"></script>
<!-- 引入 OrbitControls 控制器 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/OrbitControls.min.js"></script>
<script>
    // 获取场景容器元素
    const container = document.getElementById('scene-container');

    // 创建场景
    const scene = new THREE.Scene();

    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);

    // 创建环境光
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(ambientLight);

    // 创建聚光灯
    const spotLight = new THREE.SpotLight(0xffffff, 0.8);
    spotLight.position.set(10, 10, 10);
    scene.add(spotLight);

    // 创建 GLTF 加载器
    const loader = new THREE.GLTFLoader();

    // 加载 GLB 文件
    loader.load(
        'https://hxma.oss-cn-shanghai.aliyuncs.com/app/800rt.glb', // 替换为你的 GLB 文件路径
        (gltf) => {
            const model = gltf.scene;
            scene.add(model);
        },
        undefined,
        (error) => {
            console.error('加载模型时出错:', error);
        }
    );

    // 创建轨道控制器，允许用户通过鼠标交互控制相机视角
    const controls = new THREE.OrbitControls(camera, renderer.domElement);

    // 渲染循环函数
    function animate() {
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
    }

    // 启动渲染循环
    animate();

    // 处理窗口大小变化
    window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    });
</script>
</body>

</html>